<template>
	<view class="bill">	
		<u-navbar
			title="账单管理"
			:border-bottom="false"  
		>
			<view class="navbar__right" slot="right">
				<view class="navbar__right__icon">
					<u-icon name="more-dot-fill" @click="actionShow=true"></u-icon>
				</view>

				<u-action-sheet :list="actionList"
					v-model="actionShow"
					@click="actionClick"
				></u-action-sheet>
			</view>
		</u-navbar>
	<u-sticky>
		<view class="bill__top">

			<view class="bill__top__range" @click="startPicker=true">
				<view class="bill__top__range__text">
					<view >开始时间</view>
					<u-icon name="arrow-down-fill" ></u-icon>
				</view>
				<view class="bill__top__range__time">
					{{startDate}}
				</view>
				<u-picker mode="time" 
					v-model="startPicker" 
					:params="timePickerParams"
					@confirm="startTimeConfirm">
				</u-picker>
			</view>
			<view class="bill__top__range" @click="endPicker=true">
				<view class="bill__top__range__text">
					<view >结束时间</view>
					<u-icon name="arrow-down-fill"  ></u-icon>
				</view>
				<view class="bill__top__range__time">
					{{endDate}}
				</view>
				<u-picker mode="time" 
					v-model="endPicker" 
					:params="timePickerParams"
					@confirm="endTimeConfirm">
				</u-picker>
			</view>
<!-- 			<view class="bill__top__add" @click="addBill">
				<u-icon name="search"></u-icon>
				<view>查询</view>
			</view> -->
			<view class="bill__top__add" @click="getBillListByDate">
				<u-icon name="search"></u-icon>
				<view>查询</view>
			</view>
		</view>
	</u-sticky>
	
	<view class="bill__enterprise"  >
		<view class="bill__enterprise__top">
<!-- 			<view class="bill__enterprise__top__range">
				<view>{{enterprise,}}</view> -->
				<!-- <u-icon name="arrow-down-fill" size="5" color="#1b1b1b"></u-icon> -->
			<!-- </view> -->
		</view>
		<view v-if="searchStatus=='loadding'" class="bill__enterprise__loadding">
			<u-loading  mode="circle" :show="loadShow"></u-loading>
		</view>
		<view v-else>
			<view v-if="billList.length==0" class="bill__enterprise__noresult">
				<u-empty text="未查询到账单" mode="list"></u-empty>
			</view>
			<view v-else :class="{'bill__enterprise__list':true,
							'bill__enterprise__list--last':index==(billList.length-1)} 
				" v-for="(bill,index) in billList">
				<view class="bill__enterprise__list__top">
					<view class="bill__enterprise__list__top__number">编号：{{bill.billNumber}} </view>
					<view class="bill__enterprise__list__top__button" @click="viewBill(bill)">查看详情</view>
				</view>
				<view class="bill__enterprise__list__mid">
					<view class="bill__enterprise__list__mid__left">
						<view class="bill__enterprise__list__mid__left__park">时间：</view>
						<view class="bill__enterprise__list__mid__left__date">{{bill.chargeDate}}</view>
					</view>
					<view class="bill__enterprise__list__mid__right">
						<view class="bill__enterprise__list__mid__right__total">-{{bill.actualTotal}}</view>
					</view>
				</view>
			</view>
		</view>

	</view>
	</view>
	
</template>

<script>
	import testData from './testData.js'
	export default {
		data() {
			return {
				searchResult:"",
				curentPage:1,
				enterprise:"",
				billList:[],
				searchStatus:"loadding",
				startPicker:false,
				endPicker:false,
				timePickerParams:{
					year: true,
					month: true,
					day: true,
				},
				startDate:"",
				endDate:"",
				actionList:[{
					text:"缴费类型管理",
				}],
				actionShow:false,
				
				
			}
		},
		mounted(){
			// this.getBillList();
			// 测试数据
			// this.enterpriseList=testData.enterPriseList;
			// this.billList=testData.billList;
			// this.enterprise=this.$store.state.userInfo.enterpriseId
			// 获取时间
			// let curDate=new Date();
			// let curYear=curDate.getFullYear();
			// let curMonth=curDate.getMonth()+1;
			// let curDay=curDate.getDate();
			// curMonth=curMonth>=10?curMonth:'0'+curMonth;
			// curDay=curDay>=10?curDay:'0'+curDay;
			// this.startDate=this.getFormatDate(curYear,'01','01');
			// this.endDate=this.getFormatDate(curYear,curMonth,curDay)
			
			this.startDate='-'
			this.endDate='-'
			this.getEnterprise();
			this.getBillList();
		},
		methods: {
			actionClick(index){
				if(index==0){
					uni.navigateTo({
						url:"/pages/core/service/bill/billType"
					})
				}
			},
			getFormatDate(year,month,day){
				// month=month>=10?month:'0'+month;
				// day=day>=10?day:'0'+day;
				return year+"-"+month+"-"+day;
			},
			getRequestDateFormat(dateString){
				// let date=dateString.split("-");
				// return date[0]+date[1]+date[2];
				return dateString+" 00:00:00";
			},
			startTimeConfirm(date){
				this.startDate=this.getFormatDate(date.year,date.month,date.day)
				// this.getBillListByDate()
			},
			endTimeConfirm(date){
				this.endDate=this.getFormatDate(date.year,date.month,date.day);
				// this.getBillListByDate()
			},
			async getBillListByDate(){
				if(this.$store.state.userInfo.enterpriseId==""){
					this.billList=[]
					return 
				}
				if(this.startDate=='-' || this.endDate=='-'){
					uni.showToast({
						title:"请选择起始时间",
						icon:"none",
						duration:2000
					})
					return
				}else{
					this.searchStatus="loadding"
					let billQueryData={
						pageNum:1,
						pageSize:1,
						billNumber:"16208199286096753",
						enterpriseName:"",
						startDate:this.getRequestDateFormat(this.startDate),
						endDate:this.getRequestDateFormat(this.endDate)
					}
					await this.$Axios({
						method:"post",
						url:this.$store.state.baseURL+"/bill/query",
						data:billQueryData
					}).then((response)=>{
						if(response.data.state=="success"){
							this.billList=response.data.msg.data;
							console.log("billList",this.billList)
						}else{
							uni.showToast({
								title:response.data.msg,
								icon:"none",
								duration:2000
							})
						}
					})
					this.searchStatus="finish"
				}

			},
			async getBillList(){
				if(this.$store.state.userInfo.enterpriseId==""){
					this.billList=[]
					this.searchStatus="finish"
					return 
				}
				this.searchStatus="loadding"
				let billQueryData={
					pageNum:1,
					pageSize:10,
					enterpriseId:this.$store.state.userInfo.enterpriseId
				}
				await this.$Axios({
					method:"post",
					url:this.$store.state.baseURL+"/bill/enterprise/query",
					data:billQueryData
				}).then((response)=>{
					if(response.data.state=="success"){
						this.billList=response.data.msg.data;
						console.log("billList",this.billList)
					}else{
						uni.showToast({
							title:response.data.msg,
							icon:"none",
							duration:2000
						})
					}
				})
				this.searchStatus="finish"
			},
			getEnterprise(){
				let _this=this
				console.log("store.userinfo",_this.$store.state.userInfo.enterpriseId)
				let queryParams={
					"enterprise_id":_this.$store.state.userInfo.enterpriseId
				}
				this.$Axios({
					method:"get",
					url:_this.$store.state.baseURL+"/enterprise/info/access",
					params:queryParams
				}).then((response)=>{
					console.log("response",response)
					if(response.data.state=="SUCCESS"){
						this.enterprise=response.data.msg;
					}else{
						uni.showToast({
							title:response.data.msg,
							icon:"none",
							duration:2000
						})
					}
				});
			},
			viewEnterpriseBill(enterpriseName){
				
			},
			viewBill(bill){
				this.$Router.push({
					path:"/pages/core/service/bill/billContent",
					query:{bill:bill}
				})
				uni.navigateTo({
					url:"/pages/core/service/bill/billContent?number="+billNumber,
				})
			},
			addBill(){

				uni.navigateTo({
					url:"/pages/core/service/bill/addBill"
				})
			}
		}
	}
</script>

<style lang="less">
.navbar{
	&__right{
		display: flex;
		flex-direction: row;
		margin-right: @uni-spacing-col-base;
		margin-left: auto;

		&__icon{
			font-size: @uni-font-size-x-lg;
			margin-left: @uni-spacing-col-base;
			margin-right: @uni-spacing-col-base;
		}
	}
}
.bill{
	background-color: @uni-bg-color-grey;
	height: calc(100vh);
	&__top{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		padding:@uni-spacing-row-sm @uni-spacing-col-base;
		background-color: #fff;
		&__range{
			display: flex;
			flex-direction: column;
			align-items: center;
			
			&__text{
				display: flex;
				flex-direction: row;
				color: @font-color-grey;
				font-size: @uni-font-size-sm;
				margin: @uni-spacing-col-sm;
			}
			
		}
		&__add{
			display: flex;
			flex-direction: row;
			color: @font-color-blue;
		}
		
	}
	&__enterprise{
		display: flex;
		flex-direction: column;
		margin:@uni-spacing-row-base @uni-spacing-col-base;
		padding-bottom: @uni-spacing-row-lg;
		border-radius: @border-small;
		
		&__top{
			display: flex;
			flex-direction: row;
			background-color: #fff;
			&__range{
				display: flex;
				margin-left: @uni-spacing-col-lg;
				margin-top: @uni-spacing-col-lg;
				font-size: @uni-font-size-lg;
			}
		}
		&__loadding{
			display: flex;
			flex-direction: row;
			justify-content: center;
		}
		&__noresult{
			margin-top: @uni-spacing-row-lg;
		}
		&__list{
			display: flex;
			flex-direction: column;
			padding: @uni-spacing-row-lg @uni-spacing-col-lg;
			// border-top: 0.01rpx solid @uni-border-color;
			border-bottom: 0.1px solid @uni-border-color;
			background-color: #fff;
			&__top{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: @uni-spacing-row-base;
				&__number{
					// font-weight: bold;
					font-size: @uni-font-size-lg;
				}
				&__button{
					
					// background-color: @color-blue;
					// padding: @uni-spacing-col-base;
					// color: #fff;
					// font-size: @uni-font-size-sm;
					// border-radius: 10rpx;
					
					// border-radius: 15rpx;
					// background-color: #f5f5f5;
					// background-color: #007AFF ;
					color: @font-color-blue;
					// color: #007AFF;
					// font-weight: lighter;
					font-size: @uni-font-size-sm;
				}
			}
			&__mid{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: @uni-spacing-row-lg;
				padding-bottom: @uni-spacing-row-sm;
				
				&__left{
					display: flex;
					flex-direction: column;
					&__park{
						
					}
					&__date{
						margin-top: @uni-spacing-row-x-sm;
						font-size: @uni-font-size-sm;
						color: @uni-text-color-grey;
					}
				}
				&__right{
					&__total{
						font-size: @uni-font-size-x-lg;
					}
				}
				
			}
		}
		&__list--last{
			border-bottom: 0;
		}
	}
}	

</style>
